<template>
	<div class="ml-register">
		<div class="icon-box">
			<div class="ml-icon-login-001"></div>
			<p>盈鱼理财</p>
		</div>
		<div class="login-box">
			<div>
				<span>手机号</span><input  v-model="tel" type="num" placeholder="请输入手机号码"/><br/>
			</div>
			<div>
				<span>验证码</span><input class="msg-input" v-model="code" type="number" placeholder="请输入验证码"/><span v-on:click="getMsg($event)" class="msg">{{msg}}</span>
			</div>
			<div>
				<span>密&nbsp;&nbsp;&nbsp;码</span><input v-model="pwd" type="password" placeholder="6-12位数字和字母的登录密码"/>
			</div>
			
		</div>
		<div v-on:click="register($event )" :class="{'register-btn':tel!=''&&pwd!=''&&code!='','register-btn-initial':tel==''||pwd==''||code==''}">注册</div>
		<ul>
			<li v-on:click="clickBox(confirm)" :class="{'ml-icon-register-001':confirm,'ml-icon-register-002':!confirm}"></li>
			<li>已阅读并同意</li>
			<router-link tag="li" :to="{name:'protocolUser'}">《盈鱼理财用户协议》</router-link>
		</ul>
	</div>
</template>

<script>
import request from "../../config/request.js"
import md5 from "../../config/md5.js"
export default {
	data() {
		return {
			tel:'',
			pwd:'',
			code:'',
			confirm:true,
			msg:'获取验证码'
		}
	},
	created() {

	},
	mounted(){
		var h = window.innerHeight;
		this.$(".ml-register").height(h);
	},
	methods: {
		clickBox(confirm){
			var self=this;
			this.confirm=!confirm;
		},
		register(event){
			var self=this;
			var _date=new Date().getTime();
			var sign = "_date="+_date+"&code="+self.$data.code+"&phone="+self.$data.tel+"&=!sign_yingyu_686";
			sign = md5.md5(sign).toLocaleLowerCase();
			self.$.ajax({
				url:'/fish-backend/apis/sms/validate',
				type:'POST',
				beforeSend:function(xhr){		 
					xhr.setRequestHeader('appidentifier','ios');
					xhr.setRequestHeader('source','web');
					xhr.setRequestHeader('channel','yingyu686');
				},
				data:{	
					'_date':_date,
					'code':self.code,
					'phone':self.tel,			 	
					'sign':sign
				},
				success:function(data){
					console.log(data);
					if(data.code==0){
						var _date=new Date().getTime();
						var sign = "_date="+_date+"&password="+self.$data.pwd+"&userName="+self.$data.tel+"&=!sign_yingyu_686";
						sign = md5.md5(sign).toLocaleLowerCase();
						self.$.ajax({
							url:'/fish-backend/apis/app/register',
							type:'POST',
							beforeSend:function(xhr){		 
								xhr.setRequestHeader('appidentifier','ios');
								xhr.setRequestHeader('source','web');
								xhr.setRequestHeader('channel','yingyu686');
							},
							data:{
								'_date':_date,
								'password':self.pwd,
								'userName':self.tel,			 	
								'sign':sign
							},
							success:function(data){
								console.log(data);
							}
						});	
					}else{
						alert("验证码错误");
					}
				}
			});	
		},
		getMsg(event){
			var self=this;
			request.getCheckUser({'phone':self.tel},function(res){
				console.log(res);
				if(!res.data){
					var _date=new Date().getTime();
					var sign = "_date="+_date+"&phone="+self.$data.tel+"&=!sign_yingyu_686";
					console.log(sign);
					sign = md5.md5(sign).toLocaleLowerCase();
					var param={	
						'_date':_date,
						'phone':self.tel,			 	
						'sign':sign
					}
//					request.getPhoneMsg(param,function(data){
//						self.$data.msg=60;
//						console.log(self.$(event.target).css("pointer-events"));
//						self.$(event.target).css("pointer-events",'none');
//						var timer = setInterval(function(){
//							self.$data.msg--;
//							if(self.$data.msg==0){
//								clearInterval(timer);
//								self.$data.msg="获取验证码";
//								self.$(event.target).css("pointer-events",'auto');
//							}
//						},1000);
//					});
					self.$.ajax({
						url:'/fish-backend/apis/sms/send',
						type:'POST',
						beforeSend:function(xhr){		 
							xhr.setRequestHeader('appidentifier','ios');
							xhr.setRequestHeader('source','web');
							xhr.setRequestHeader('channel','yingyu686');
						 },
						 data:{	
							'_date':_date,
							'phone':self.tel,			 	
							'sign':sign
						 },
						 success:function(data){
						 	if(data.msg!="请求成功"){
						 		alert(data.msg);
						 	}else{
								self.$data.msg=60;
								self.$(event.target).css("pointer-events",'none');
								var timer = setInterval(function(){
									self.$data.msg--;
									if(self.$data.msg==0){
										clearInterval(timer);
										self.$data.msg="获取验证码";
										self.$(event.target).css("pointer-events",'auto');
									}
								},1000);						 		
						 	}
						 }
					});
				}else{
					alert("该手机号已被注册");
				}
			});
		}
	}
}		
</script>

<style lang="scss">
.ml-register{
	background:#fff;
	.icon-box{
		height:300px;
		padding-top:90px;
		p{
			font-family: PingFang-SC-Regular;
			font-size: 50px;
			color: #3D76FF;
			text-align: center;
			margin-top:30px;
		}
	}
	.login-box{
		div{
			width:80%;
			margin:20px auto;
			border-bottom:2px solid  #ECECEC;
			padding:20px;
			span:first-child{
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #999999;
			}
			span.msg{
				font-family: PingFang-SC-Regular;
				font-size: 24px;
				color: #FFFFFF;
				letter-spacing: 0.64px;
				background: #3D76FF;
				border-radius: 100px;
				padding:8px 13px;
			}
			span{
				font-family: PingFangSC-Regular;
				font-size: 36px;
				color: #fff;
				letter-spacing: 0;
				line-height: 36px;
			}
			input{
				font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #666666;
				letter-spacing: 4px;
				border:0;
				background: transparent;
				padding:0px 20px 5px 30px;
				width:70%;
			}
			input:focus{
				 outline: none;
			}	
			input.msg-input{
				width:50%;
			}
			input::-webkit-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;
	        }
	        input::-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
	        input:-moz-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
	        input:-ms-input-placeholder{
            	font-family: PingFang-SC-Regular;
				font-size: 30px;
				color: #C8C8C8;
				letter-spacing: 0.8px;	        	
	        }
		}

	}
	.register-btn{
		width:75%;
		margin:70px auto 30px;
		height:93px;
		text-align: center;
		line-height:94px;
		background: #497FFF;
		border-radius: 100px;
		font-family: PingFang-SC-Regular;
		font-size: 38px;
		color: #FFFFFF;
		pointer-events: auto;	
	}
	.register-btn-initial{
		background: #E5E5E5;
		border-radius: 100px;
		width:75%;
		margin:70px auto 30px;
		height:93px;
		line-height:94px;
		text-align: center;
		font-family: PingFang-SC-Regular;
		font-size: 38px;
		color: #B7B7B7;	
		pointer-events: none;	
	}
	ul{
		overflow: hidden;
		text-align: center;
		margin:0 auto;
		li{
			float:left;
			font-family: PingFangSC-Regular;
			letter-spacing: 0;
			font-size: 26px;
			margin-top:10px;
		}
		li:first-child{
			margin-top:5px;
			margin-left:16%;
		}
		li:nth-child(2){
			color: #C8C8C8;	
			margin-left:10px;		
		}
		li:last-child{
			color: #3D76FF;
			margin-left:5px;
			
		}
	}	
}
</style>